import React, { Component } from 'react'

//使用react-redux时候 那个组件需要使用store里面的东西，就在那个组件引用connect （高阶组件）
import {connect} from 'react-redux'

import {addAction,subAction,subActionAsync} from '../../../actions/cart'

//不使用react-redux时候
//export default class CartList extends Component {
// 使用react-redux时候
class CartList extends Component {
    // 不使用react-redux时候
    // constructor(){
    //     super()
    //     this.state = {
    //         cartList:[]
    //     }
    // }

    // // 必须要分装成getState方法名，（和this.props.storeCarts.getState()同名）
    // getState = () => {
    //     this.setState({
    //         cartList: this.props.storeCarts.getState().cart
    //     })
    // }

    // componentDidMount(){
    //     this.getState()
    //     // 订阅store消息
    //     this.props.storeCarts.subscribe(this.getState)
    // } 
    render() {
        // 使用react-redux时候
        console.log("使用connect连接以后，会自动加上dispatch方法",this.props)
        // 不使用react-redux时候
        // console.log("我是商品列表接收到store",this.props.storeCarts.getState().cart.carts)
        // console.log("我自己的state对象",this.state.cartList)
        return (
            <table border={1}>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>商品名称</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        // 不使用react-redux时候
                        // this.state.cartList.map(item => {
                        //     return (
                        //         <tr key={item.id}>
                        //             <td>{item.id}</td>
                        //             <td>{item.title}</td>
                        //             <th>{item.price}</th>
                        //             <th>{item.amount}</th>
                        //             <th>
                        //                 {/* 通过dispatch传入action，然后根据不同动作去访问 Reducers */}
                        //                 <button onClick={() =>{
                        //                     this.props.storeCarts.dispatch(subAction(item.id))
                        //                 }}>-</button>
                        //                 &emsp;
                        //                 <button onClick={() =>{
                        //                     this.props.storeCarts.dispatch(addAction(item.id))
                        //                 }}>+</button>
                        //             </th>
                        //         </tr>
                        //     )
                        // })
                        // 使用react-redux时候
                        this.props.cartList.map(item => {
                            return (
                                <tr key={item.id}>
                                    <td>{item.id}</td>
                                    <td>{item.title}</td>
                                    <th>{item.price}</th>
                                    <th>{item.amount}</th>
                                    <th>
                                        {/* react-redux下通过connnet把dispath传递在this.props下 
                                        通过dispatch传入action，然后根据不同动作去访问 Reducers */}
                                        {/* <button onClick={() =>{
                                            //this.props.dispatch(subAction(item.id))
                                            // 通过下面mapDispatchToProps传递参数精简调用
                                            this.props.sub(item.id)
                                        }}>-</button> */}
                                        {/* 最终精简版本 */}
                                        <button onClick={this.props.subAction.bind(this, item.id)}>-</button>
                                        &emsp;
                                        {/* <button onClick={() =>{
                                            //this.props.dispatch(addAction(item.id))
                                            // 通过下面mapDispatchToProps传递参数精简调用
                                            this.props.add(item.id)
                                        }}>+</button> */}
                                        {/* 最终精简版本 */}
                                        <button onClick={this.props.addAction.bind(this, item.id)}>+</button>
                                        <button onClick={this.props.subActionAsync.bind(this, item.id)}>异步2秒减发</button>
                                    </th>
                                </tr>
                            )
                        })
                    }

                </tbody>
            </table>
        )
    }
}

// 把store.getState() 设置到props里面
const mapStateToProps = (state) => {
    console.log("我能接收store.getState()一样的事情",state)
    return {
        cartList: state.cart
    }
}

// 优化dispatch，然调用action更加简洁(把store传递过来的dispatch方法拆分成对应动作的方法，这个时候dispatch没有了)
// const mapDispatchToProps = dispatch => {
//     return {
//         add: (id) => dispatch(addAction(id)),
//         sub: (id) => dispatch(subAction(id)),
//     }
// }

// 使用react-redux时候 connect第二组件为当前组件
//export default connect(mapStateToProps)(CartList)
//优化dispatch，
//export default connect(mapStateToProps, mapDispatchToProps)(CartList)

// 最终优化版本，直接引入actionCreamet的对象数组{addAction,subAction} 作为第二参数
export default connect(mapStateToProps, {addAction,subAction,subActionAsync})(CartList)